<template>
    <section id="testimonials" class="py-20">
      <div class="text-center max-w-3xl mx-auto mb-16">
        <span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 text-sm font-medium rounded-full mb-4">用户评价</span>
        <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-gray-900 mb-6">来自我们用户的真实反馈</h2>
        <p class="text-lg text-gray-600">看看其他用户如何使用我们的 AI 工具提升他们的工作效率。</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
          <div class="flex items-center space-x-1 mb-4">
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
          </div>
          <p class="text-gray-600 mb-6">"这个平台彻底改变了我的工作方式。AI 文本生成器帮我节省了大量时间，生成的内容质量也非常高。客服响应也很及时，非常推荐！"</p>
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/user5/60/60" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
            <div>
              <h4 class="font-bold text-gray-900">张明</h4>
              <p class="text-gray-600 text-sm">内容创作者</p>
            </div>
          </div>
        </div>
        
        <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
          <div class="flex items-center space-x-1 mb-4">
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
          </div>
          <p class="text-gray-600 mb-6">"AI 图像生成器超出了我的期望。我可以根据自己的想法快速生成专业级的图像，这在以前是不可能的。界面也非常直观，容易使用。"</p>
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/user6/60/60" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
            <div>
              <h4 class="font-bold text-gray-900">李华</h4>
              <p class="text-gray-600 text-sm">UI/UX 设计师</p>
            </div>
          </div>
        </div>
        
        <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
          <div class="flex items-center space-x-1 mb-4">
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star text-yellow-400"></i>
            <i class="fa fa-star-half-o text-yellow-400"></i>
          </div>
          <p class="text-gray-600 mb-6">"作为一家小型企业的所有者，AI 数据分析工具帮助我从数据中获取了宝贵的见解。它让我能够做出更明智的业务决策，提高了我们的竞争力。"</p>
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/user7/60/60" alt="用户头像" class="w-12 h-12 rounded-full mr-4">
            <div>
              <h4 class="font-bold text-gray-900">王芳</h4>
              <p class="text-gray-600 text-sm">企业主</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </template>    